<template>
	<view>
		<view class="list">
			<view class="flex_col" v-for="(item,index) in orderList" :key="index" :data-index="index">
				<view style="padding-right: 40upx"><text class="balance-inc" :style="item.sum < 0? 'color:#00CDCD':''">{{ (item.sum > 0 ? '￥' : '￥') + item.sum / 100.0 }}</text></view>
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">{{item.orderNo}}</view>
					</view>
					<view class="info">{{item.gmtCreate | dateFormat}}</view>
				</view>
			</view>
		</view>
		<!-- 空白页 -->
		<empty v-if="!orderList || orderList.length === 0"></empty>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import empty from "@/components/empty";
	export default {
		data() {
			return {
				orderList: [],
				loadingType: 'more',
				pageNo: 1,
				pageSize: 10
			}
		},
		components: {
			empty
		},
		onLoad(options) {
			this.loadData();
			// #ifdef H5
			document.onLong = function(e) {
				var e = e || window.event;
				e.preventDefault();
			}
			// #endif
		},
		methods: {
			/* 获取列表数据 */
			loadData() {
				const that = this
				if (that.loadingType === 'loading') {
					//防止重复加载
					return;
				}

				that.loadingType = 'loading';
				that.$api.request('distribution', 'getOrderPage', {
					pageNo: that.pageNo,
					pageSize: that.pageSize,
					type: that.type
				}, failres => {
					if (failres.errno === 22004) {
						// 若是说不存在分销用户，则提示用户去开通
						uni.showModal({
							title: '开通',
							content: '您还没开通分销，一键开通？',
							success: (e) => {
								if (e.confirm) {
									uni.redirectTo({
										url: '/pages/distribution/share'
									})
								}
							}
						})
					} else {
						that.$api.msg(failres.errmsg)
					}
					that.loadingType = 'noMore'
				}).then(res => {
					that.pageNo = res.data.pageNo + 1
					that.loadingType = res.data.pageNo < res.data.totalPageNo ? 'more' : 'noMore'
					that.orderList = res.data.items
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	/* 列式弹性盒子 */
	.flex_col {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}

	/* 弹性盒子弹性容器 */
	.flex_col .flex_grow {
		width: 0;
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
	}

	.flex_row .flex_grow {
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
	}

	/* 弹性盒子允许换行 */
	.flex_col.flex_wrap {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.balance-inc {
		color: #FF8247;
		font-weight: bold;
		font-size: 40upx;
	}

	.freeze-balance-inc {
		color: #1E90FF;
		font-weight: bold;
		font-size: 40upx;
	}

	/* 列表 */
	.list {
		padding-bottom: 100upx;
		background-color: #fff;
		font-size: 28upx;
		color: #333;
		user-select: none;
		touch-callout: none;

		&>view {
			padding: 24upx 30upx;
			position: relative;

			&:active,
			&.active {
				background-color: #f3f3f3;
			}

			image {
				height: 80upx;
				width: 80upx;
				border-radius: 4px;
				margin-right: 20upx;
			}

			&>view {
				line-height: 40upx;

				.time,
				.info {
					color: #999;
					font-size: 24upx;
				}

				.time {
					width: 150upx;
					text-align: right;
				}

				.info {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		&>view:not(:first-child) {
			margin-top: 1px;

			&::after {
				content: '';
				display: block;
				height: 0;
				border-top: #CCC solid 1px;
				width: 620upx;
				position: absolute;
				top: -1px;
				right: 0;
				transform: scaleY(0.5);
				/* 1px像素 */
			}
		}
	}

	.bottom-bar {
		width: 100%;
		height: 100upx;
		position: fixed;
		bottom: 0px;
		background: #EEEEEE;
		align-items: center;
		text-align: center;
	}
</style>
